<template>
  <div class="body">
  
     <van-nav-bar
     style=" background-color:#1C5697; color: white;"
     title="党支书评价"
/>
  
    <div style="padding:10px" v-loading="loading">
        <h3 style="color:red">分数为0-100分</h3>
      <div
        class="list"
        v-for="(item,index) in tableData"
        :key="index"
      >

        <div class="left"></div>
        <div class="item"  >
          <div>
            <div class="name">{{item.姓名}}</div>
            <div style="display:flex;flex-direction:row">
            <div class="xianqin" style="padding-right:10px">
              <a :href="'/mobile_jixiao/pdf/web/viewer.html?file=/mobile_jixiao/file/'+item.url.substring(item.url.lastIndexOf('/')+1)">述职报告 </a>
            </div>
           
            
             </div>
           
          </div>
          <div  >
          <el-input-number v-model="item.评分分数" :min="0" :max="100" style="margin-right:10px;float:right;width:150px"/>
          </div>
          <div>
            <el-button  style="width:100%;margin-top:10px" :disabled="item.disabled" size="small" type="primary"  @click="()=>score(item,index)">确定</el-button>
          </div>
        </div>
      </div>
       
     </div>
  </div>
</template>

<script>
import NavBar from '../../components/NavBar/navBar'
import request from "../../utils/request"
import linq from "linq"

import { Dialog } from 'vant';
export default {
  components: {
    NavBar,
  },
  name: 'Check',
  data () {
    return {
        //
        loading:false,
        年份:'2019',
        tableData:[],
        //
    }
  },
  mounted () {
    //
    this.fetchData();
    //
  },
  methods: {
      async fetchData() {
     
   
      this.list = [];
      debugger
      let   res = await request({
          url: "/performance",
          method: "get",
          params: {
            query: {
              cate: "党支部书记评价",
              年份: this.年份
            }
          }
      });
      console.log(res.data);
      
      var list = await Promise.all(res.data.map(async item => {
        var record = linq
          .from(item.评分记录)
          .firstOrDefault(`$.number=="${this.$root.user.number}"`, null);
         
        return {
          年份: item.年份,
          _id:item._id,
          姓名: item.姓名,
          number:item.number,
          部门: item.部门,
          url:item.url,
          disabled:record !== null,
          评分分数: record == null ? 0 : record.score
        };
      }));
        
      this.tableData =  list;
      
  },
   async score (row,index) {
    
     await Dialog.confirm({message:'是否录入分数'})
     this.loading =true;
  
         await request({
          url: "/performance",
          method: "put",
          data: {query:{_id:row._id},update:{$push:{评分记录:{
            score: row.评分分数,
            number: this.$root.user.number,
      }}}}});
      row.disabled=true;
     this.loading=false;
     Dialog.alert({message:'成功'});
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.body {
  overflow: hidden;
}
.collapse {
  margin-top: 46px;
}
.titleYear {
  background-color: white;
  height: 2.5rem;
  line-height: 2.5rem;
  border-bottom: 1px solid #ccc;
}
.year {
  margin: 0.1rem 0.5rem;
  font-weight: bold;
}
.van-icon {
  margin-left: 0.2rem;
}
.item {

  /* line-height: 4rem; */
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
}
.list {

  display: flex;
 
  padding-top:1rem;
}
.left {
  height: 4rem;
  width: 0.7rem;
  background-color: #558ffa;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.name {
  font-weight: bold;
  font-size: 15px;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
.xianqin {
  margin-top: 0.4rem;
  font-size: 14px;
  color: rgb(180, 179, 179);
}
.value {
  height: 4rem;
  line-height: 4rem;
  position: absolute;
  right: 5rem;
  margin-top: 0.1rem;
}
.value2 {
  height: 4rem;
  line-height: 4rem;
  position: absolute;
  right: 1rem;
}
</style>
